<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :columns="dataGrid.columns"
      :request-api="roleList"
      :pagination="false"
      :data-callback="tableDataCallback"
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <!-- 角色编辑新增 -->
    <DialogForm
      :options="addForm.options"
      :title="addForm.title"
      :width="addForm.width"
      :form-cols="addForm.formCols"
      :form-attrs="addForm.formAttrs"
      v-model:visible="addForm.visible"
      @get-model="(form: User.ResUserList) => (addForm.form = form)"
      @submit-form="saveAddForm"
    ></DialogForm>

    <!-- 权限菜单 -->
    <Perm v-model:visible="permissionMenu.visible" :role-id="permissionMenu.roleId"></Perm>
  </div>
</template>

<script setup lang="ts">
import Perm from "./components/opPerm.vue";

import { ProTableInstance } from "@/components/ProTable/interface";
import { User } from "@/api/interface";

import { roleList } from "@/api/modules/auth/user";

import { useAddForm } from "./mixins/addForm";
import { useDataGrid } from "./mixins/dataGrid";

const proTableBox = ref<ProTableInstance>();

const { addForm, saveAddForm } = useAddForm(proTableBox);
const { dataGrid, permissionMenu, tableDataCallback } = useDataGrid(proTableBox, addForm);
</script>
